<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>时钟</title>
    <style>
        *{
            padding:0;
            margin:0;
            font-size:50px;
            font-family:"微软雅黑";
        }
        .wrapper{                                               /*时钟主体*/
            width:666px;
            height:666px;
            background:rgba(20,240,255,0.3);
            border:20px solid #8B4513;
            margin:30px auto;
            border-radius:100%;
            position:relative;
            box-shadow:0 0 12px 6px #303030;;
        }
        .circle,.h,.m,.s,span{
            position:absolute;
        }
        .h,.m,.s{
            width:10px;
            height:220px;
            left:13px;
            bottom:50%;
         }
        .circle{                                                 /*时钟中心*/
            width:36px;
            height:36px;
            border-radius:100%;
            background:#669933;
            top:315px;
            left:315px;
        }
        .h{
            background:black;
            z-index:4;
        }
        .m{
            background:red;
            z-index:5;
        }
        .s{
            background:orange;
            z-index:6;
        }
       /* span{
            position:absolute;
        }*/
        .twelve{
            top:20px;
            left:303px;
        }
        .eleven{
            top:40px;
            left:247.5px;
        }
        .ten{
            top:60px;
            left:192px;
        }
        .nine{
            top:296px;
            left:19px;
        }
        .eight{
            top:296px;
            left:19px;
        }
        .seven{
            top:296px;
            left:19px;
        }
        .six{
            bottom:20px;
            left:303px;
        }
        .five{
            top:296px;
            left:19px;
        }
        .four{
            top:296px;
            left:19px;
        }
        .three{
            top:296px;
            right:19px;
        }
        .two{
            top:296px;
            left:19px;
        }
        .one{
            bottom:20px;
            left:303px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
</head>
<body>
    <div class="wrapper">
        <span class="twelve">12</span>
        <span class="eleven">11</span>
        <span class="ten">10</span>
        <span class="nine">9</span>
        <span class="eight">8</span>
        <span class="seven">7</span>
        <span class="six">6</span>
        <span class="five">5</span>
        <span class="four">4</span>
        <span class="three">3</span>
        <span class="two">2</span>
        <span class="one">1</span>
        <div class="circle">
            <div class="h"></div>
            <div class="m"></div>
            <div class="s"></div>
        </div>
    </div>
</body>
</html>